<template>
  <div class="storeAdd">
    <div class="form">
      <el-form :model="form" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="库区" prop="location">
               <el-cascader :props="props" v-model="form.location"></el-cascader>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item prop="code" label="库位编号">
              <el-input
                placeholder="请输入"
                v-model="form.code"
                :disabled="true"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="库位名称" prop="name">
              <el-input placeholder="请输入" v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度类型" prop="temperatureType">
              <el-select
                v-model="form.temperatureType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="常温" value="CW"></el-option>
                <el-option label="冷藏" value="LC"></el-option>
                <el-option label="恒温" value="HW"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="area">
          <el-col :span="6" class="f1">
            <el-form-item label="承重类型" prop="bearingType">
              <el-select
                v-model="form.bearingType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="重型" value="ZX"></el-option>
                <el-option label="轻型" value="QX"></el-option>
                <el-option label="中型" value="BX"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="用途属性" prop="useType">
              <el-select
                v-model="form.useType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="入库缓存区" value="RKHCQ"></el-option>
                <el-option label="出库缓存区" value="CKHCQ"></el-option>
                <el-option label="存储区" value="CCQ"></el-option>
                <el-option label="分拣区" value="FJQ"></el-option>
                <el-option label="质检区" value="ZJQ"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="仓库状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="0">停用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="承载体积" prop="maxVolume">
              <el-input placeholder="请输入" v-model="form.maxVolume"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="承载上限">
              <el-input placeholder="请输入" v-model="form.maxNum"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="承载重量">
              <el-input placeholder="请输入" v-model="form.maxWeight"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="库位排/列/层">
              <el-input placeholder="请输入" v-model.number="form.locationRow"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item class="p1">
              <el-input placeholder="请输入" v-model.number="form.locationColumn"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item class="p1">
              <el-input placeholder="请输入" v-model.number="form.locationLayer"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="库位长/宽/高">
              <el-input placeholder="请输入" v-model="form.locationLength"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item  class="p1">
              <el-input placeholder="请输入" v-model="form.Width"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item  class="p1">
              <el-input placeholder="请输入" v-model="form.locationHeight"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="buttonBox">
      <button class="btn1" @click="$router.back()">返回</button>
      <button class="btn2" @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
import {
  code,
  status,
  add,
  getEdit,
  editSubmit,
  childrenStatus
} from '@/api/baseInfo/storageManage'

export default {
  name: 'detail-page',
  data () {
    return {
      form: {
        areaId: '',
        warehouseId: '',
        bearingType: '',
        code: '',
        name: '',
        status: 1,
        temperatureType: '',
        useType: '',
        location: [],
        maxVolume: '',
        maxNum: '',
        maxWeight: '',
        locationRow: '',
        locationColumn: '',
        locationLayer: '',
        locationLength: '',
        locationWidth: '',
        locationHeight: ''
      },
      rules: {
        bearingType: [{ required: true, message: '请输入', trigger: 'blur' }],
        code: [{ required: true, message: '请输入', trigger: ['blur'] }],
        temperatureType: [
          { required: true, message: '请输入', trigger: ['blur'] }
        ],
        name: [{ required: true, message: '请输入', trigger: ['blur'] }],
        location: [{ required: true, message: '请输入', trigger: ['blur'] }],
        maxVolume: [{ required: true, message: '请输入', trigger: ['blur'] }],
        status: [{ required: true, message: '请输入', trigger: ['blur'] }],
        useType: [{ required: true, message: '请输入', trigger: ['blur'] }]
      },
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad
      },
      id: ''
    }
  },
  methods: {
    async submit () {
      console.log(this.form)
      if (this.$route.query.id) {
        console.log(this.$route.query.id)
        await editSubmit(this.form)
        this.$message.success('操作成功')
        this.$router.push('/storageManage')
      } else {
        this.form.areaId = this.form.location[1]
        this.form.warehouseId = this.form.location[0]
        await add(this.form)
        this.$message.success('操作成功')
        this.$router.push('/storageManage')
      }
    },
    async getCode () {
      const { data } = await code()
      this.form.code = data
    },
    async getStatus () {
      const { data } = await status()
      this.options = data
    },
    async getEdit () {
      const { data } = await getEdit(this.$route.query.id)
      data.location = [data.warehouseId, data.areaId]
      this.form = data
    },

    lazyLoad (node, resolve) {
      this.getData(node, resolve)
    },
    async getData (node, resolve) {
      const level = node.level
      if (!node.data) {
        await status().then(res => { // 接口
          const nodes = Array.from(res.data).map(item => ({
            value: item.id,
            label: item.name,
            leaf: level >= 1
          }))
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes)
        })
      } else {
        await childrenStatus(node.data.value).then(
          res => {
            const nodes = Array.from(res.data).map(item => ({
              value: item.id,
              label: item.name,
              leaf: level >= 1
            }))
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes)
          }
        )
      }
    }

  },
  async created () {
    this.getCode()
    this.getStatus()
    if (this.$route.query.id) {
      this.getEdit()
    }
  }
}
</script>

<style lang="scss" scoped>
.storeAdd {
  height: 509px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  margin-top: 20px;
  margin-left: 29px;
  margin-right: 29px;
  padding-top: 31px;
  padding-bottom: 30px;
  .form {
    padding-left: 30px;
    padding-right: 30px;
    .el-row {
      margin-bottom: 30px;
      p {
        line-height: 18px;
        padding-bottom: 10px;
        padding-left: 5px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #887e7e;
      }
      .el-input {
        ::v-deep .el-input__inner {
          background: #f8f5f5;
          border-color: #f3ebeb;
          color: #b5abab;
        }
      }
      .el-select {
        ::v-deep .el-input__inner {
          background: #f8f5f5;
          border-color: #f3ebeb;
          color: #b5abab;
        }
      }
      .el-form-item {
        margin-bottom: 0;
        ::v-deep .el-form-item__label {
          line-height: 28px;
          margin-bottom: 5px;
        }
        ::v-deep .el-form-item__content {
          line-height: 20px;
          .el-radio-group {
            margin-top: 40px;
            margin-left: -68px;
          }

        }
      }
      .p1 {
        margin-top: 32px;
      }
      .el-cascader {
        width: 320px;
        margin-left: -52px;
        margin-top: 32px;
        ::v-deep .el-input__inner {
          background: #f8f5f5;
          border-color: #f3ebeb;
          color: #b5abab;
        }
      }
    }
    .area {
      .f1 {
        position: relative;
        .div {
          width: 40px;
          height: 40px;
          background: #e7dfdf;
          border-radius: 0 6px 6px 0;
          padding: 10px 10px;
          border: 0;
          color: #5d5d5d;
          vertical-align: middle;
          display: table-cell;
          position: absolute;
          right: 0;
          top: 33px;
        }
      }
    }
  }

  .buttonBox {
    padding: 15px 20px;
    border-top: 1px solid #f5efee;
    text-align: center;
    .btn1 {
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      width: 170px;
      margin: 0 15px;
      background: #f8f5f5;
      color: #332929;
    }
    .btn2 {
      background: #ffb200;
      color: #332929;
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      width: 170px;
      margin: 0 15px;
    }
  }
}
</style>
